<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>环境对象-介绍</title>
</head>
<body>
<h2>环境对象</h2>
<p>目标：能够分析判断函数运行在不同环境中 this 所指代的对象</p>
<p>环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境</p>
<p>
    作用：弄清楚this的指向，可以让我们代码更简洁 <br>
    函数的调用方式不同，this 指代的对象也不同 <br>
    【谁调用， this 就是谁】 是判断 this 指向的粗略规则 <br>
    直接调用函数，其实相当于是 window.函数，所以 this 指代 window
</p>
<p>
    <a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=103&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7">
        环境对象 视频讲解
    </a>
</p>
<hr>

<button>点击按钮</button>

<script>
    // 每个函数里面都有this 环境对象  普通函数里面this指向的是window
    function 函数() {
        console.log(this) // 控制台看信息, this就是一个对象
    }

    // 调用函数
    函数() // 这种实际是简略写法
    window.函数() // 这个是完整写法, 实际就是 window这个对象调用 "函数"


    console.log('----------------------')
    // 获取DOM元素
    const DOM_按钮 = document.querySelector('button')
    // 监控 鼠标点击事件
    DOM_按钮.addEventListener('click', function () {
        // this指向是函数的 调用者, 谁调用this 就指向谁
        console.log(this)  // 点击按钮 看控制台信息, this指向的是 "DOM_按钮"对象, "DOM_按钮"是 button标签. 所以输出信息是 按钮标签信息

        // DOM_按钮.style.color = 'red' // 修改按钮文字颜色
        this.style.color = 'red' // 这里this指向的就是 "DOM_按钮", 使用2个写法一样的效果
    })
</script>
</body>
</html>